<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">
	<style>
.atop {
	vertical-align: top;
}
</style>
	<h:form id="form">
		<h:panelGrid columns="2" columnClasses="atop">
			<rich:panel>
				<f:facet name="header">
					<h:outputText value="Quick Filter Panel" />
				</f:facet>
				<fieldset><legend>Filter By Vendor</legend>
				<ul>
					<a4j:repeat value="#{carsBean.allVendors}" var="vendor">
						<li><h:outputLink value="#">#{vendor}
								<rich:componentControl target="table" operation="filter"
								event="click">
								<f:param value="vendor" />
								<f:param value="#{vendor}" />
							</rich:componentControl>
						</h:outputLink></li>
					</a4j:repeat>
				</ul>
				</fieldset>
			</rich:panel>
			<rich:dataTable value="#{carsBean.allInventoryItems}" var="car"
				id="table" rows="20">
				<rich:column id="vendor"
					filterValue="#{carsFilteringBean.vendorFilter}"
					filterExpression="#{carsFilteringBean.vendorFilter == '' or carsFilteringBean.vendorFilter == null or carsFilteringBean.vendorFilter == car.vendor}">
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="Vendor" />
						</h:panelGroup>
					</f:facet>
					<h:outputText value="#{car.vendor}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Model" />
					</f:facet>
					<h:outputText value="#{car.model}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="Price" />
					</f:facet>
					<h:outputText value="#{car.price}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="Mileage" />
						</h:panelGroup>
					</f:facet>
					<h:outputText value="#{car.mileage}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="Days Live" />
						</h:panelGroup>
					</f:facet>
					<h:outputText value="#{car.daysLive}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:panelGroup>
							<h:outputText value="VIN " />
						</h:panelGroup>
					</f:facet>
					<h:outputText value="#{car.vin}" />
				</rich:column>
				<f:facet name="footer">
					<rich:dataScroller />
				</f:facet>
			</rich:dataTable>
		</h:panelGrid>
	</h:form>
</ui:composition>